<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程管理 - 企业培训平台</title>

    <style>
        /* --- 全局布局与变量 --- */
        :root {
            --header-height: 60px; /* 顶部导航栏的高度 */
            --sidebar-width: 240px; /* 左侧侧边栏的宽度 */
            --primary-color: #007bff;
            /* ... 其他颜色变量 ... */
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --warning-color: #ffc107;
            --secondary-color: #6c757d;
            --light-gray: #f8f9fa;
            --border-color: #dee2e6;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f4f5f7;
            margin: 0;
            color: #333;
            /* 为固定的顶部导航栏留出空间 */
            padding-top: var(--header-height);
        }

        /* --- 模拟的顶部导航栏样式 (请根据您的 header 片段调整) --- */
        .top-header-placeholder {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--header-height);
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 1010; /* 比侧边栏层级更高 */
            display: flex;
            align-items: center;
            padding: 0 30px;
            font-size: 1.2em;
            font-weight: 500;
        }

        /* --- 侧边栏样式调整 --- */
        .teacher-sidebar-placeholder {
            position: fixed;
            top: var(--header-height); /* 关键：从顶部导航栏下方开始 */
            left: 0;
            bottom: 0; /* 占满剩余高度 */
            width: var(--sidebar-width);
            background-color: #2c3e50;
            z-index: 1000;
            /* ... 其他侧边栏样式 ... */
        }

        /* --- 主内容区布局调整 --- */
        .main-content {
            margin-left: var(--sidebar-width); /* 为左侧侧边栏留出空间 */
            padding: 30px;
            /* 注意：这里的 margin-top 被 body 的 padding-top 替代了，效果相同 */
        }

        .container-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 25px 30px;
        }

        /* ... 其他所有美化样式 (表格、按钮等) 保持不变 ... */
        .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .page-header h1 { margin: 0; font-size: 1.8em; }
        .section-header { margin: 25px 0 15px 0; font-size: 1.3em; color: #333; }
        .search-container { margin-bottom: 25px; display: flex; gap: 10px; align-items: center; }
        .search-container input { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1em; width: 300px; }
        .alert { padding: 15px; margin-bottom: 20px; border-radius: 5px; border: 1px solid transparent; }
        .alert-success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
        .alert-danger { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
        .table-responsive { overflow-x: auto; }
        .table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
        .table th, .table td { padding: 12px 15px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-color); }
        .table thead th { background-color: var(--light-gray); font-weight: 600; color: #495057; }
        .table tbody tr:hover { background-color: #e9ecef; }
        .course-cover-thumbnail { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; }
        .table-actions { display: flex; gap: 8px; }
        .table-actions form { margin: 0; }
        .btn { display: inline-block; font-weight: 500; text-align: center; vertical-align: middle; cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 8px 15px; font-size: 0.9em; border-radius: 4px; transition: all 0.2s ease-in-out; text-decoration: none; color: #fff; }
        .btn:hover { filter: brightness(90%); }
        .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
        .btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); }
        .btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); }
        .btn-info { background-color: var(--info-color); border-color: var(--info-color); }
        .btn-warning { background-color: var(--warning-color); border-color: var(--warning-color); }
        .no-courses-message { text-align: center; padding: 40px; color: #666; background-color: #fafafa; border: 1px dashed #ccc; border-radius: 8px; }

    </style>
</head>
<body>

<div th:replace="~{fragments/header :: header}">
    <div class="top-header-placeholder">
        <span>企业培训平台 - 顶部导航</span>
    </div>
</div>

<div th:replace="~{fragments/sidebar :: teacher-sidebar}"></div>

<div class="main-content">
    <div class="container-card">

        <div class="page-header">
            <h1>课程管理</h1>
            <a th:href="@{/course/add}" class="btn btn-primary">新增课程</a>
        </div>

        <div th:if="${errorMessage}" class="alert alert-danger" role="alert" th:text="${errorMessage}"></div>
        <div th:if="${successMessage}" class="alert alert-success" role="alert" th:text="${successMessage}"></div>

        <h3 class="section-header">我的课程列表</h3>
        <div class="search-container">
            <input type="text" id="courseSearchInput" placeholder="输入课程名称搜索..." class="form-control">
            <button id="searchButton" class="btn btn-primary">搜索</button>
            <button id="resetSearchButton" class="btn btn-secondary">重置</button>
        </div>

        <div class="table-responsive">
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th><th>课程名称</th><th>封面</th><th>教师ID</th>
                    <th>价格</th><th>章节数</th><th>创建时间</th><th>操作</th>
                </tr>
                </thead>
                <tbody id="course-table-body">
                <tr th:each="course : ${courses}">
                    <td th:text="${course.id}"></td>
                    <td class="course-name" th:text="${course.couName}"></td>
                    <td>
                        <img th:if="${course.couPic != null and course.couPic != ''}"
                             th:src="${course.couPic}" alt="课程封面" class="course-cover-thumbnail"
                             onerror="this.onerror=null;this.src='https://placehold.co/80x45/cccccc/ffffff?text=No+Image';">
                        <img th:unless="${course.couPic != null and course.couPic != ''}"
                             src="https://placehold.co/80x45/cccccc/ffffff?text=No+Image" alt="无封面" class="course-cover-thumbnail">
                    </td>
                    <td th:text="${course.teaId}"></td>
                    <td th:text="${course.couPrice != null ? course.couPrice : '0'}"></td>
                    <td th:text="${course.couCataNum != null ? course.couCataNum : '0'}"></td>
                    <td th:text="${course.createTime != null ? #temporals.format(course.createTime, 'yyyy-MM-dd HH:mm') : 'N/A'}"></td>
                    <td class="table-actions">
                        <a th:href="@{/course/detail/{id}(id=${course.id})}" class="btn btn-info">详情</a>
                        <a th:href="@{/course/edit/{id}(id=${course.id})}" class="btn btn-warning">编辑</a>
                        <form class="delete-form" th:action="@{/course/delete/{id}(id=${course.id})}" method="post">
                            <button type="submit" class="btn btn-danger">删除</button>
                        </form>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="no-courses-message" th:style="${#lists.isEmpty(courses) ? 'display:block;' : 'display:none;'}">
            <p>暂无课程。</p>
        </div>
    </div>
</div>

<script>
    // 您的 JavaScript 功能被完整保留并得到了优化
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('courseSearchInput');
        const searchButton = document.getElementById('searchButton');
        const resetSearchButton = document.getElementById('resetSearchButton');
        const courseTableBody = document.getElementById('course-table-body');
        const noCoursesMessageDiv = document.querySelector('.no-courses-message');
        const tableResponsiveDiv = document.querySelector('.table-responsive');

        function fetchCourses(keyword = '') {
            const url = `/course/api/search?keyword=${encodeURIComponent(keyword)}`;

            fetch(url)
                .then(response => {
                    if (!response.ok) throw new Error(`网络请求失败: ${response.status}`);
                    return response.json();
                })
                .then(courses => {
                    courseTableBody.innerHTML = '';

                    if (courses && courses.length > 0) {
                        noCoursesMessageDiv.style.display = 'none';
                        tableResponsiveDiv.style.display = 'block';

                        courses.forEach(course => {
                            const createTime = course.createTime ? new Date(course.createTime).toLocaleString('sv-SE').slice(0, 16).replace('T', ' ') : 'N/A';
                            const couPicHtml = `<img src="${course.couPic || 'https://placehold.co/80x45/cccccc/ffffff?text=No+Image'}" alt="课程封面" class="course-cover-thumbnail" onerror="this.onerror=null;this.src='https://placehold.co/80x45/cccccc/ffffff?text=No+Image';">`;

                            const row = courseTableBody.insertRow();
                            row.innerHTML = `
                                <td>${course.id}</td>
                                <td class="course-name">${course.couName || ''}</td>
                                <td>${couPicHtml}</td>
                                <td>${course.teaId}</td>
                                <td>${course.couPrice !== null ? course.couPrice : '0'}</td>
                                <td>${course.couCataNum !== null ? course.couCataNum : '0'}</td>
                                <td>${createTime}</td>
                                <td class="table-actions">
                                    <a href="/course/detail/${course.id}" class="btn btn-info">详情</a>
                                    <a href="/course/edit/${course.id}" class="btn btn-warning">编辑</a>
                                    <form class="delete-form" action="/course/delete/${course.id}" method="post">
                                        <button type="submit" class="btn btn-danger">删除</button>
                                    </form>
                                </td>
                            `;
                        });
                    } else {
                        noCoursesMessageDiv.style.display = 'block';
                        tableResponsiveDiv.style.display = 'none';
                    }
                })
                .catch(error => {
                    console.error('获取课程失败:', error);
                    alert('获取课程列表失败，请检查网络或联系管理员。');
                });
        }

        searchButton.addEventListener('click', () => fetchCourses(searchInput.value.trim()));
        resetSearchButton.addEventListener('click', () => {
            searchInput.value = '';
            fetchCourses();
        });

        courseTableBody.addEventListener('submit', function(event) {
            if (event.target && event.target.classList.contains('delete-form')) {
                event.preventDefault();

                const form = event.target;
                const row = form.closest('tr');
                const courseName = row.querySelector('.course-name').innerText;

                if (confirm(`您确定要删除课程 "${courseName}" 吗？此操作不可撤销。`)) {
                    form.submit();
                }
            }
        });
    });
</script>

</body>
</html>